<template>
  <div class="sort">
    <p>排序：</p>
    <div :class="{active: !Object.keys(modelValue).length}"
         @click="emits('update:modelValue', {})">
      默认
    </div>
    <div :class="{active: modelValue.sortField === 'createTime'}"
         @click="emits('update:modelValue', {sortField: 'createTime'})">
      最新
    </div>
    <div :class="{active: modelValue.sortField === 'praiseCount'}"
         @click="emits('update:modelValue', {sortField: 'praiseCount'})">
      最热
    </div>
  </div>
</template>

<script lang="ts"
        setup>
defineProps<{
  modelValue: any
}>()

let emits = defineEmits<{
  (e: 'update:modelValue', v: any): void
}>()
</script>

<style lang="less"
       scoped>
.sort {
  height: 60px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f5f5f5;
  padding: 20px;

  p {
    margin-left: 20px;
  }

  div {
    cursor: pointer;
    margin-left: 30px;

    &.active {
      color: @xtxColor;
    }
  }
}
</style>